如何使用Vue

2023-07-31 18:53| 来源: 网络整理| 查看: 265

如何使用Vue

在开始使用Quasar之前，最好熟悉ES6，并且对Vue3如何运作有相当了解。（ES6快速浏览和ES6完整功能列表 —— 别担心，你不需要了解所有ES6）。对于具有reactive UI的开发经验的开发者，Vue文档从头到尾阅读最多只需要半天的时间，并且可以帮助您了解Quasar组件如何使用和配置。

TIP

如果您是Vue和反应式UI库的初学者，并且想要一个好的教程，我们建议您看看Vue和Quasar视频教程。

在阅读了Vue文档后，让我们清楚一些最常见的问题，例如 “如何使用Quasar组件，Vue属性，方法和事件”。

Vue单个文件组件(SFC)

您将使用包含多个部分的*.vue文件构建您的Quasar应用程序：template (HTML)、 script (Javascript) and style (CSS/SASS/SCSS/Stylus/Less) 全部在同一个文件。

目前，建议使用的Composition API。请查看Vue.js文档以了解更多信息。

// This is where your Javascript goes // to define your Vue component, which // can be a Layout, a Page or your own // component used throughout the app. /* This is where your CSS goes */

But you can still use Composition API without or Options API if you wish. The only difference is within the tag.

// This is where your Javascript goes // to define your Vue component, which // can be a Layout, a Page or your own // component used throughout the app. export default { // } /* This is where your CSS goes */ CSS预处理器

对于标签，您可以使用您想要的任何CSS预处理器。 Sass/SCSS （推荐）和Stylus 开箱即用。对于SCSS/SASS或LESS，您需要安装他们的Webpack加载器（例如：yarn add --dev less-loader）。

您可以指定你选择的预处理器来处理您正在编写的CSS代码：

.some-div font-size: 15px .some-div { font-size: 15px; } 使用Quasar指令

Quasar附带了一些自定义的Vue指令。这些指令几乎可以应用于任何DOM元素或组件。

Quasar指令的例子：

Click Me

请注意如何在HTML模板中将Ripple用作v-ripple。 Vue指令以v-为前缀。

为了让您使用Quasar提供的任何指令，首先需要告诉Quasar您希望嵌入它。打开/quasar.conf.js文件并添加以下引用：

... ... Click me. I got ripples. 使用Quasar组件

Quasar组件的名称以“Q”开头，如“QBtn”或“QElementResizeObserver”。要使用它们，您需要在/quasar.config.js中添加对它们的引用。

让我们在以下示例中使用QBtn和QIcon中，然后我们将看到如何在我们的应用中嵌入这些组件：

请注意，QBtn在Vue HTML模板中是如何使用的(以的方式)。如果我们要导入QElementResizeObserver，那么我们将在模板中以的方式使用它。

使用Quasar插件

Quasar插件是您可以在Vue文件中以及在其外部使用的功能，如Notify、BottomSheet、AppVisibility等。

WARNING

在你的应用程序中使用它们之前，你需要在/quasar.config.js中添加对它们的引用（如下所示）。

framework: { plugins: [ 'Notify', 'BottomSheet' ] }

我们以Notify为例，看看如何使用它。在Vue文件中，您将编写如下内容 (Composition API)：

import { useQuasar } from 'quasar' export default { setup () { const $q = useQuasar() function showNotification () { $q.notify('Some other message') } return { showNotification } } }

注意在模板区我们使用的是$q.。

在Options API中的一个等效的脚本部分：

export default { methods: { showNotification () { this.$q.notify('Some other message') } } }

现在让我们看一个Vue文件：

import { Notify } from 'quasar' // ... Notify.create('My message') 自闭合标签

WARNING

当您使用Quasar UMD版本时，请勿使用自闭合标签。您的浏览器在Vue解析您的DOM元素之前解释HTML，因此您的HTML语法必须正确。未知的标签（如Vue组件）无法自闭合，因为您的浏览器会在您打开一个标签但从未关闭它时解释它们。

一些Quasar组件不需要你在其中包含HTML内容。在这种情况下，您可以将它们用作自闭合标签。以下是QIcon的一个例子：

自闭合意味着上述模板等同于：

这两种形式都是有效的，可以使用，但UMD除外，你必须明确关闭标签。它与常规DOM元素一样工作：

一些eslint-plugin-vue校验规则实际上使用自闭合语法来强制执行。

处理Vue属性

让我们举一些伪Quasar组件（我们将其称为QBogus）来支持下面的属性。我们将在下面的部分中讨论每种类型的Vue属性。

Vue属性类型说明infinite布尔无限幻灯片滚动size字符串加载杆的厚度。speed数字加载栏更新其值的速度有多快（以毫秒为单位）。columns对象定义列的对象（请参阅下面的“列定义”）。offset数组有两个数字的数组。水平和垂直偏移（以像素为单位）。布尔属性

布尔属性意味着它只接受一个严格的布尔值。赋给它的值不会转换为布尔值，所以您必须确保您使用的是真布尔值。

TIP

在Quasar中，所有布尔属性都有false作为默认值。因此，你不需要明确地给它们分配false值。

如果您试图控制该属性并在运行时动态更改它，请将其绑定到您范围内的变量：

import { ref } from 'vue' export default { setup () { const myInfiniteVariable = ref(false) return { myInfiniteVariable } } }

另一方面，如果你知道这个布尔值不会改变，你可以使用变量的简写版本，比如组件属性，并指定它。换句话说，您不用将变量绑定到组件范围中的变量，因为它总是 true：

字符串属性

正如你可以想象的那样，字符串是这类属性的值所必需的。

import { ref } from 'vue' export default { setup () { // notice String as value const mySize = ref('16px') return { mySize } } } 数字属性 import { ref } from 'vue' export default { setup () { // notice Number as value const myNumber = ref(50) return { myNumber } } } 对象属性 import { ref } from 'vue' export default { setup () { const myColumns = ref({ key: 'value', anotherKey: 'another value' }) return { myColumns } } } 数组属性 export default { setup () { return { myOffset: [10, 20] } } } 处理Vue方法

在整个文档中您会注意到一些Quasar组件有能被调用的方法。例如：

Vue方法说明next()转到下一张幻灯片。previous(doneFn)转到上一张幻灯片。toggleFullscreen()切换全屏模式。

为了让您访问这些方法，您需要首先在组件上设置Vue引用。这是一个例子：

import { ref, onMounted } from 'vue' export default { setup () { const myRef = ref(null) // after the component has mounted into DOM: onMounted(() => { // we call "next()" method of our component myRef.value.next() }) // calling before mount point might result in errors // as Vue hasn't yet prepared the Vue reference // we expose myRef to the scope so Vue // can use it in the template as well return { myRef } } }

And here is the same example, but with Options API:

export default { // we can now access `this.$refs.myRef` // an example on the mounted() Vue component hook mounted () { // calling "next()" method: this.$refs.myRef.next() } // calling before mount point might result in errors // as Vue hasn't yet prepared the Vue references } 处理Vue事件

在整个文档中您会注意到一些Quasar组件有一个名为“Vue事件”的部分。

“Vue事件”示例

事件名称说明@show在Modal显示后立即触发。@hide在Modal隐藏后立即触发。

为了让您捕获这些事件，当它们被触发时，您需要在HTML模板中的组件本身上为它们添加侦听器。这是一个例子：

export default { setup () { function doSomething () { // this method has been called (in this case) // because @show event was triggered by QBogus component } function doSomethingElse () { // this method has been called (in this case) // because @hide event was triggered by QBogus component } return { doSomething, doSomethingElse } } } 发现错误?联系站长MIT LICENSE | 隐私政策 | Quasar艺术作品浙ICP备17014303号-2 联系站长

【本文地址】

如何使用Vue

如何使用Vue

今日新闻

推荐新闻